<template>
  <div class="totalMoneyOut">
    <div class="title">
      <p>1109全天交易额统计（单位：万）</p>
      <img src="../assets/img/119全天统计线条.png" alt="" />
    </div>
    <div id="main" style="width: 100%; height: 160px"></div>
  </div>
</template>

<script>
import url from "../api/apiUrl";
import { getRequest } from "../api/indexGet";
import resizeMixins from "../utils/resizeMixins";
export default {
  type: {
    default: 0,
  },
  mixins: [resizeMixins],
  data() {
    return {
      // option: {
      //   xAxis: {
      //     type: "category",
      //     boundaryGap: false,
      //     data: [],
      //     axisLine: {
      //       lineStyle: {
      //         color: "#fff", //x轴轴线颜色
      //       },
      //     },
      //   },
      //   yAxis: {
      //     show: false,
      //     type: "value",
      //   },
      //   grid: {
      //     width: "95%", // 宽度
      //     height: "79%", // 高度
      //     bottom: 20,
      //     left: "2%",
      //     right: "10%",
      //   },
      //   series: [
      //     {
      //       data: [],
      //       type: "line",
      //       areaStyle: {
      //         color: {
      //           type: "linear",
      //           x: 0,
      //           y: 0,
      //           x2: 0,
      //           y2: 1,
      //           colorStops: [
      //             {
      //               offset: 0,
      //               color: "rgba(25,160,255,0.5)", // 0% 处的颜色
      //             },
      //             {
      //               offset: 1,
      //               color: "rgba(25,160,255,0)", // 100% 处的颜色
      //             },
      //           ],
      //           global: false, // 缺省为 false
      //         },
      //       },
      //       label: {
      //         show: true,
      //         position: "top",
      //       },
      //     },
      //   ],
      //   totalAxios: null,
      // },
      option: {
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          show: false,
          type: "value",
          data: [],
        },
        grid: {
          width: "95%", // 宽度
          height: "79%", // 高度
          bottom: 20,
          left: "2%",
          right: "10%",
        },
        series: [
          {
            data: [],
            type: "bar",
            label: {
              show: true,
              position: "top",
              backgroundColor: "transparent",
              color: "#F3FFFF",
              distance: 0, //距离图形元素的距离。
              formatter: (params) => {
                if (params.data > 0) {
                  return params.data;
                } else {
                  return "";
                }
              },
            },
            itemStyle: {
              color: "rgba(32,220,249,0.6)",
            },
          },
        ],
      },
    };
  },
  created() {},
  async mounted() {
    await this.getTotal();
    await this.intervalAxios();
  },
  methods: {
    // 获取数据
    async getTotal() {
      // if (this.type == 1) {
      let res = await getRequest(url.everyTwoMoneyOut);
      if (res.data.code == "000000") {
        let timeDate = [];
        let gmvDate = [];
        res.data.content.map((obj, index) => {
          timeDate.push(obj.time);
          gmvDate.push(obj.gmvWithUnit);
        });
        this.option.xAxis.data = timeDate;
        this.option.yAxis.data = gmvDate;
        this.option.series[0].data = gmvDate;
      }
      // } else {
      //   let res = await getRequest(url.everyTwoMoney);
      //   if (res.data.code == "000000") {
      //     let timeDate = [];
      //     let gmvDate = [];
      //     res.data.content.map((obj, index) => {
      //       timeDate.push(obj.time);
      //       gmvDate.push(obj.gmvWithUnit);
      //     });
      //     this.option.xAxis.data = timeDate;
      //     this.option.yAxis.data = gmvDate;
      //     this.option.series[0].data = gmvDate;
      //   }
      // }
      var chartDom = document.getElementById("main");
      var twChart = this.echarts.init(chartDom);
      twChart.setOption(this.option);
      window.addEventListener(
        "resize",
        () => {
          twChart.resize();
        },
        false
      );
    },
    // 2s请求一次
    intervalAxios() {
      this.totalAxios = setInterval(() => {
        this.getTotal();
      }, 4000);
    },
  },
  destroyed() {
    clearInterval(this.totalAxios);
  },
};
</script>

<style lang="less" scoped>
.totalMoneyOut {
  margin-top: -60px;
  .title {
    padding: 0 30px;
    p {
      font-size: 14px;
      color: rgba(151, 236, 255, 1);
    }
    img {
      width: 267px;
      height: 1px;
    }
  }
}
</style>